<script setup lang="ts">
import {onMounted} from "vue";
import {useRoute} from 'vue-router'
import {useMenuStore} from './store/menuStore.ts'
import Login from "./views/Login.vue";
import {useTokenStore} from "./store/tokenStore.ts";

const route = useRoute()
const menuStore = useMenuStore()
const tokenStore = useTokenStore();

onMounted(() => {
  if (!menuStore.menus){
    menuStore.getMenuList()
  }else {
    console.log("menu 缓存")
  }
  tokenStore.currentUser()
})
</script>
<template >
  <div v-if="tokenStore.isAuthenticated">
    <el-container class="layout-container-demo" style="height: 100vh">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :router="true" :default-active="route.fullPath">
            <div v-for="menu in  menuStore.menus" :key="menu.id">
              <el-menu-item v-if="menu.children.length ===0" :index="menu.route">
                <el-icon >
                  <component :is="menu.icon"></component>
                </el-icon>
                <span>{{ menu.name }}</span>
              </el-menu-item>
              <el-sub-menu v-else :index="menu.route">
                <template #title>
                  <el-icon>
                    <component :is="menu.icon"></component>
                  </el-icon>
                  {{ menu.name }}
                </template>
                <el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" :index="subMenu.route">
                  <el-icon>
                    <component :is="subMenu.icon"></component>
                  </el-icon>
                  <span>{{ subMenu.name }}</span>
                </el-menu-item>
              </el-sub-menu>
            </div>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header>
          <div>后台管理系统</div>
          <div>欢迎{{tokenStore.user.username}}回来</div>
        </el-header>

        <el-main>
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <div v-else>
    <login/>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.el-header {
  background: lightcyan;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
